<!--
 * @Author: YNT 2501512800@qq.com
 * @Date: 2022-05-25 10:30:32
 * @LastEditors: YNT 2501512800@qq.com
 * @LastEditTime: 2022-05-25 14:14:20
 * @FilePath: \code\src\components\empty.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="empty-main" v-if="showEmpty">
        <img class="empty-icon" src="../assets/empty_icon.png"/>
        <div class="empty-text">暂无数据</div>
    </div>
</template>
<script>
    export default {
        props: {
            value: {
                type: String | Array | Object
            }
        },
        data() {
            return {
                showEmpty: false
            }
        },
        watch: {
            'value': function() {
                console.log(this.value)
                if(JSON.stringify(this.value) === "{}") {
                    this.showEmpty = true;
                }else if(this.value!=='' && this.value.length <=0) {
                    this.showEmpty = true;
                }else {
                    this.showEmpty = false;
                }
            }
        }
    }
</script>
<style lang="scss" scoped>
    .empty-main {
        width: 100%;
        min-height: 280px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .empty-icon {
            width: 60px;
            height: 60px;
            margin: 20px 0;
        }
        .empty-text {
            color: #888;
        }
    }
</style>
